<template>
    <view class="container">
        <view class="header">
            <view class="search">
                <uv-search placeholder="请输入产品" v-model="search" :showAction="false" bgColor="#f7f8fa" @search="OnSearch"></uv-search>
            </view>
        </view>

        <scroll-view class="list" :scroll-y="true" :refresher-triggered="refreshing" :refresher-enabled="true" @refresherrefresh="OnRefresh" @scrolltolower="OnScrollTolower" refresher-background="#fff0" :style="`height: ${WidowHeight}px;`">
            <view class="item" v-for="(item,index) in list" :key="item.id">
                <view class="title">
                    {{ item.products.name }}
                </view>

                <view class="line"></view>

                <view class="son-list">
                    <view class="son-item">
                        <view class="name">
                            查询次数：
                        </view>
                        <view class="value">
                            {{ item.query_num ?? 0 }}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            防伪码：
                        </view>
                        <view class="value" @click="OnCopy(item.query_code)">
                            {{ item.query_code }}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            首次查询时间：
                        </view>
                        <view class="value">
                            {{ item.query_time_text }}
                        </view>
                    </view>

                    <view class="son-item" @click="OnOpenQrCode(item,index)">
                        <view class="name">
                            二维码：
                        </view>
                        <view class="value">
                            <image
                                src="/static/images/code.png"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <uv-load-more :status="status" />

            <uv-back-top></uv-back-top>
        </scroll-view>

        <!-- <uv-safe-bottom></uv-safe-bottom> -->
    </view>

    <!-- 消息提示 -->
	<uv-toast ref="NoticeRef"></uv-toast>

    <!-- 弹出层 -->
    <uv-popup ref="PopupRef" :safeAreaInsetBottom="false" :round="'10px'" mode="center">
        <view class="qrcode">
            <uv-image :showLoading="true" :src="QrCode" width="240px" height="240px"></uv-image>
        </view>
    </uv-popup>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$business;

// 搜索关键字
const search = ref('');

// 下拉刷新状态
const refreshing = ref(false);
// 产品数据
const list = ref([]);
// 当前页
const page = ref(1);
// 加载更多状态
const status = ref('loading');
// 上拉加载状态
const finished = ref(false);

// 可视窗口的高度
const WidowHeight = ref(0);

// 小程序二维码
const QrCode = ref('');

// 弹出层组件实例
const PopupRef = ref(null);

// 消息提示组件实例
const NoticeRef = ref(null);

// 页面加载生命周期
onLoad(() =>
{
    uni.getSystemInfo({
        success:(res) =>
        {
            WidowHeight.value = res.windowHeight;
        }
    });

    GetProductData();
});

// 下拉刷新
const OnRefresh = () =>
{
    // 防止触发多次
    if(refreshing.value === true) return false;

    // 清空参数
    page.value = 1;
    list.value = [];
    refreshing.value = true;
    finished.value = false;
    status.value = 'loading';

    // 等1.5秒调用函数
    setTimeout(GetProductData,1500);
}

// 上拉加载
const OnScrollTolower = () =>
{
    // 上拉加载状态已经true 不能触发接口
    if(finished.value === true) return false;

    GetProductData();
}

// 获取数据
const GetProductData = async () =>
{
    // 如果下拉刷新的状态为true，再修改状态为false
    if(refreshing.value === true) refreshing.value = false;

    const params = {
        busid:business.value.id,
        page:page.value,
        search:search.value
    }

    const result = await uni.$uv.http.post('/business/product',params);

    if(result.code === 1)
    {
        const count = result.data ? result.data.count : 0;
        list.value = result.data ? list.value.concat(result.data.list) : [];

        if(list.value.length >= count)
        {
            finished.value = true;

            // 加载状态
            status.value = 'nomore';

            return false;
        }

        page.value += 1;
    }else{
        finished.value = true;
        status.value = 'nomore';

        NoticeRef.value.show({
            type:'error',
            message:result.msg
        });
    }
}

const OnSearch = () => OnRefresh();

const OnOpenQrCode = async (item,index) =>
{
    if(item.query_qrcord)
    {
        QrCode.value = item.query_qrcord_text;
    }else{
        // 把防伪码发起后端处理
        const params = {
            code:item.query_code
        }

        const result = await uni.$uv.http.post('/business/generate',params);

        if(result.code === 1)
        {
            QrCode.value = result.data.query_qrcord_text;

            // 更新数据，第二次触发时，直接用最新数据，就不用再次请求
            list.value[index].query_qrcord = result.data.query_qrcord;

            list.value[index].query_qrcord_text = result.data.query_qrcord_text;
        }else{
            NoticeRef.value.show({
                type:'error',
                message:result.msg
            });

            return false;
        }
    }

    // 显示弹出层
    PopupRef.value.open();
}

// 复制防伪码
const OnCopy = (code) =>
{
    uni.setClipboardData({
        data: code,// 需要设置的内容
        success: function () {

            uni.hideToast();

            NoticeRef.value.show({
                type:'success',
                message:'防伪码复制成功'
            });
        }
    });
}
</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.header{
    background-color: #fff;
    padding: 10px 0;
    margin-top: 10px;
    border-radius: 10px;
}

.header .search{
    width: 95%;
    margin: 0 auto;
}

.list{
    /* 底部安全区域 */
    margin-bottom: 0;  
    margin-bottom: constant(safe-area-inset-bottom);  
    margin-bottom: env(safe-area-inset-bottom);
    background-color: transparent;
}

.item{
    background:#fff;
    border-radius: 10px;
    overflow:hidden;
    margin-top:10px;
    padding:0 10px 10px;
}

.item .title{
    padding:10px 0 10px 10px;
    font-size: 20px;
}

.item .line{
    width:100%;
    height:1px;
    background:#ebebeb;
    margin:0 auto;
    margin-bottom:10px;
}

.item .son-list .son-item{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:10px;
}

.item .son-list .son-item .name{
    color:#9b9b9a;
}

.item .son-list .son-item image{
    width: 30px;
    height: 30px;
}
</style>